import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useCanvasStore = defineStore('canvas', () => {
  // Canvas元素引用
  const canvasElement = ref(null)
  const canvasContext = ref(null)
  
  // 画布状态
  const canvas = ref({
    width: 800,
    height: 600,
    backgroundColor: '#ffffff',
    gridColor: '#e5e7eb',
    gridSize: 20,
    showGrid: true,
    showRulers: true,
    showGuides: true
  })

  // 视图状态
  const viewport = ref({
    x: 0,
    y: 0,
    zoom: 1,
    rotation: 0,
    minZoom: 0.1,
    maxZoom: 5
  })

  // 渲染状态
  const renderState = ref({
    isRendering: false,
    fps: 60,
    lastRenderTime: 0,
    renderCount: 0,
    needsRedraw: true
  })

  // 交互状态
  const interaction = ref({
    isDragging: false,
    isSelecting: false,
    isDrawing: false,
    mousePosition: { x: 0, y: 0 },
    dragStart: { x: 0, y: 0 },
    selectionStart: { x: 0, y: 0 },
    selectionEnd: { x: 0, y: 0 }
  })

  // 计算属性
  const canvasCenter = computed(() => ({
    x: canvas.value.width / 2,
    y: canvas.value.height / 2
  }))

  const viewportBounds = computed(() => ({
    left: -viewport.value.x / viewport.value.zoom,
    top: -viewport.value.y / viewport.value.zoom,
    right: (canvas.value.width - viewport.value.x) / viewport.value.zoom,
    bottom: (canvas.value.height - viewport.value.y) / viewport.value.zoom
  }))

  const zoomPercentage = computed(() => Math.round(viewport.value.zoom * 100))

  // Actions
  const setCanvasElement = (element) => {
    canvasElement.value = element
    if (element) {
      canvasContext.value = element.getContext('2d')
    }
  }
  
  const setCanvasSize = (width, height) => {
    canvas.value.width = width
    canvas.value.height = height
    renderState.value.needsRedraw = true
  }

  const setViewport = (x, y, zoom, rotation = 0) => {
    console.log('x11111',x);
    
    viewport.value.x = x
    viewport.value.y = y
    viewport.value.zoom = Math.max(viewport.value.minZoom, Math.min(viewport.value.maxZoom, zoom))
    viewport.value.rotation = rotation
    renderState.value.needsRedraw = true
  }

  const panViewport = (deltaX, deltaY) => {
    viewport.value.x += deltaX
    viewport.value.y += deltaY
    renderState.value.needsRedraw = true
  }

  const zoomViewport = (zoom, centerX, centerY) => {
    const oldZoom = viewport.value.zoom
    const newZoom = Math.max(viewport.value.minZoom, Math.min(viewport.value.maxZoom, zoom))
    
    if (newZoom !== oldZoom) {
      // 以指定点为中心缩放
      const zoomRatio = newZoom / oldZoom
      viewport.value.x = centerX - (centerX - viewport.value.x) * zoomRatio
      viewport.value.y = centerY - (centerY - viewport.value.y) * zoomRatio
      viewport.value.zoom = newZoom
      renderState.value.needsRedraw = true
    }
  }

  const resetViewport = () => {
    viewport.value.x = 0
    viewport.value.y = 0
    viewport.value.zoom = 1
    viewport.value.rotation = 0
    renderState.value.needsRedraw = true
  }

  const fitToScreen = () => {
    // 适应屏幕显示
    const padding = 50
    const scaleX = (canvas.value.width - padding * 2) / canvas.value.width
    const scaleY = (canvas.value.height - padding * 2) / canvas.value.height
    const scale = Math.min(scaleX, scaleY, 1)
    
    viewport.value.zoom = scale
    viewport.value.x = (canvas.value.width - canvas.value.width * scale) / 2
    viewport.value.y = (canvas.value.height - canvas.value.height * scale) / 2
    renderState.value.needsRedraw = true
  }

  const updateMousePosition = (x, y) => {
    interaction.value.mousePosition = { x, y }
  }

  const startDragging = (x, y) => {
    interaction.value.isDragging = true
    interaction.value.dragStart = { x, y }
  }

  const stopDragging = () => {
    interaction.value.isDragging = false
  }

  const startSelection = (x, y) => {
    interaction.value.isSelecting = true
    interaction.value.selectionStart = { x, y }
    interaction.value.selectionEnd = { x, y }
  }

  const updateSelection = (x, y) => {
    if (interaction.value.isSelecting) {
      interaction.value.selectionEnd = { x, y }
    }
  }

  const stopSelection = () => {
    interaction.value.isSelecting = false
  }

  const startDrawing = () => {
    interaction.value.isDrawing = true
  }

  const stopDrawing = () => {
    interaction.value.isDrawing = false
  }

  const setRenderState = (state) => {
    renderState.value = { ...renderState.value, ...state }
  }

  const markForRedraw = () => {
    renderState.value.needsRedraw = true
  }

  const clearRedrawFlag = () => {
    renderState.value.needsRedraw = false
  }

  const updateFPS = (fps) => {
    renderState.value.fps = fps
  }

  const updateRenderTime = (time) => {
    renderState.value.lastRenderTime = time
    renderState.value.renderCount++
  }

  // 坐标转换
  const screenToWorld = (screenX, screenY) => {
    const x = (screenX - viewport.value.x) / viewport.value.zoom
    const y = (screenY - viewport.value.y) / viewport.value.zoom
    return { x, y }
  }

  const worldToScreen = (worldX, worldY) => {
    const x = worldX * viewport.value.zoom + viewport.value.x
    const y = worldY * viewport.value.zoom + viewport.value.y
    return { x, y }
  }

  const reset = () => {
    canvas.value = {
      width: 800,
      height: 600,
      backgroundColor: '#ffffff',
      gridColor: '#e5e7eb',
      gridSize: 20,
      showGrid: true,
      showRulers: true,
      showGuides: true
    }
    
    viewport.value = {
      x: 0,
      y: 0,
      zoom: 1,
      rotation: 0,
      minZoom: 0.1,
      maxZoom: 5
    }
    
    renderState.value = {
      isRendering: false,
      fps: 60,
      lastRenderTime: 0,
      renderCount: 0,
      needsRedraw: true
    }
    
    interaction.value = {
      isDragging: false,
      isSelecting: false,
      isDrawing: false,
      mousePosition: { x: 0, y: 0 },
      dragStart: { x: 0, y: 0 },
      selectionStart: { x: 0, y: 0 },
      selectionEnd: { x: 0, y: 0 }
    }
  }

  return {
    // 状态
    canvas,
    canvasElement,
    canvasContext,
    viewport,
    renderState,
    interaction,
    
    // 计算属性
    canvasCenter,
    viewportBounds,
    zoomPercentage,
    
    // Actions
    setCanvasElement,
    setCanvasSize,
    setViewport,
    panViewport,
    zoomViewport,
    resetViewport,
    fitToScreen,
    updateMousePosition,
    startDragging,
    stopDragging,
    startSelection,
    updateSelection,
    stopSelection,
    startDrawing,
    stopDrawing,
    setRenderState,
    markForRedraw,
    clearRedrawFlag,
    updateFPS,
    updateRenderTime,
    screenToWorld,
    worldToScreen,
    reset
  }
})
